<template>
  <div class="m-istyle">
    <dl @mouseover="over" :class="nav.class">
      <dt>{{nav.title}}</dt>
      <dd
        v-for="(item, index) in nav.list"
        :key="index"
        :class="{active: kind == item.tab}"
        :data-type="item.tab"
      >{{item.text}}</dd>
    </dl>
    <ul class="ibody">
      <li v-for="(item, index) in list" :key="index">
        <el-card :body-style="{padding: '0px'}" shadow="never">
          <img :src="item.image" class="image">
          <div class="cbody">
            <div class="title" :title="item.title">{{item.title}}</div>
            <div class="sub-title" :title="item.sub_title">{{item.sub_title}}</div>
            <div class="price-info" v-if="item.rentNum && item.price_info.current_price">
              <span class="current-price-wrapper">
                <span class="price-symbol numfont">¥</span>
                <span class="current-price numfont">{{item.price_info.current_price}}</span>
              </span>
              <span class="old-price">门市价￥{{item.price_info.old_price}}</span>
              <span class="sold bottom-right-info">{{item.address}}</span>
            </div>
            <div class="price-info" v-else-if="!item.rentNum">
              <span class="current-price-wrapper">
                <span class="price-symbol numfont">¥</span>
                <span class="current-price numfont">抢光了</span>
              </span>
            </div>
            <div class="price-info" v-else>
              <span class="current-price-wrapper">
                <span class="price-symbol numfont">¥</span>
                <span class="current-price numfont">{{item.price_info.avg_price}}</span>
                <span class="units">/{{item.price_info.units}}</span>
              </span>
            </div>
          </div>
        </el-card>
      </li>
    </ul>
  </div>
</template>
<script>
import api from '@/api/index.js'
export default {
  data () {
    return {
      kind: 'all',
      resultsData: {},
      list: [
        {
          image: '//p1.meituan.net/deal/bd9a5c59a6646c683b214139056b7fe1332966.jpg@460w_260h_1e_1c',
          title: '金逸影城(荟聚IMAX店)',
          sub_title:
            '免押金,可停车,有情侣座,儿童票,可刷卡,休息区,IMAX厅,60帧厅',
          price_info: {
            current_price: null,
            old_price: null,
            avg_price: 18,
            units: '人均'
          },
          rentNum: 10,
          address: ''
        },
        {
          image: '//p1.meituan.net/mogu/4aa363a920b92b922cfaa0298bcfbb65101055.jpg@460w_260h_1e_1c',
          title: '北京国际饭店·霄云厅',
          sub_title: '生日免单自助午餐',
          price_info: {
            current_price: 198,
            old_price: 228
          },
          rentNum: 10,
          address: '建国门/北京站'
        },
        {
          image: '//p1.meituan.net/poi/ac64050e681b71087101b0ee0079766a182272.jpg@460w_260h_1e_1c',
          title: 'UME国际影城(华星店)',
          sub_title:
            '免押金,可停车,有情侣座,儿童票,可刷卡,有WIFI,休息区,IMAX厅,中国巨幕厅',
          price_info: {
            current_price: null,
            old_price: null,
            avg_price: 34.9,
            units: '人均'
          },
          rentNum: 10,
          address: ''
        },
        {
          image: '//p0.meituan.net/msmerchant/f0f72ccd78773cc5a0156b1c00d588c0961404.jpg@460w_260h_1e_1c',
          title: '大董（王府井店）',
          sub_title: '春季糖醋黄鱼套餐，建议4人使用',
          price_info: {
            current_price: 1400,
            old_price: 1472.8
          },
          rentNum: 10,
          address: '王府井/东单'
        },
        {
          image: '//p1.meituan.net/poi/697cf6a6e1785559a7bb31d0bf03c649110592.jpg@460w_260h_1e_1c',
          title: '北京饭店诺金东33餐厅',
          sub_title: '桌餐C，建议8-10人使用，可免费使用包间',
          price_info: {
            current_price: 5000,
            old_price: 5954
          },
          rentNum: 10,
          address: '王府井/东单'
        },
        {
          image: '//p1.meituan.net/msmerchant/17d8cd5405ccc74eb440af6fe7c8892f853757.png@460w_260h_1e_1c',
          title: '小王府徽菜臭鳜鱼',
          sub_title: '店长推荐四到六人餐，有赠品',
          price_info: {
            current_price: 398,
            old_price: 628
          },
          rentNum: 10,
          address: '王府井/东单'
        }
      ]
    }
  },
  props: [
    'nav'
  ],
  created () {
    api.resultsByKeywords().then(res => {
      this.resultsData = res.data.data
    })
  },
  methods: {
    over (e) {
      let dom = e.target
      let tagName = dom.tagName.toLowerCase()
      // console.log(tagName)
      if (tagName !== 'dd') {
        return false
      }
      this.kind = dom.getAttribute('data-type')
      // 动态获取数据  ajax请求
    }
  }
}
</script>
<style lang="scss">
@import '@/assets/css/index/artistic.scss'
</style>
